import React from 'react'
import Style from './Map.module.css'

const BMapGL = window.BMapGL

class Map extends React.Component {
  componentDidMount() {
    const map = new BMapGL.Map("map")
    this.drawMap(map)
    this.drawPolygon(map)
  }

  drawMap(map) {
    const point = new BMapGL.Point(117.101706,36.657597)
    map.centerAndZoom(point, 13)
    map.enableScrollWheelZoom(true)
    map.setMapStyleV2({ styleId: 'a8c87af482a918b613162ada4d0e8805' })
  }

  drawPolygon(map) {
    const bd = new BMapGL.Boundary()
    bd.get('历下区', function (rs) {
      const hole = new BMapGL.Polygon(rs.boundaries, {
        fillColor: 'blue', fillOpacity: 0.5
      })
      map.addOverlay(hole)
    })
  }

  render() {
    const { children, className } = this.props

    return (
      <div className={Style.Map}>
        <div id="map" className={Style.EMap} />
        <div className={`${Style.Content} ${className}`}>
          {children}
        </div>
      </div>
    )
  }
}

export default Map